<template>
  <div class="menu">
    <!-- <button @click="changeState()">test</button> -->
    <el-menu
      background-color="#545c64"
      text-color="#fff"
      class="el-menu-vertical-demo"
      :collapse="menu.isCollapse"
      :unique-opened="false"
      :router="true"
    >
      <el-menu-item index="/">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-user-solid"></i>
          <span slot="title">用户管理</span>
        </template>
        <el-menu-item index="/users">
          <i class="el-icon-menu"></i>
          <span slot="title">用户列表</span>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-s-platform"></i>
          <span slot="title">权限管理</span>
        </template>
        <el-menu-item index="/role-list">
          <i class="el-icon-menu"></i>
          <span slot="title">角色列表</span></el-menu-item
        >
        <el-menu-item index="/jurisdiction">
          <i class="el-icon-menu"></i>
          <span slot="title">权限列表</span></el-menu-item
        >
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-s-goods"></i>
          <span slot="title">商品管理</span>
        </template>
        <el-menu-item index="/things-lists">
          <i class="el-icon-menu"></i>
          <span slot="title">商品列表</span></el-menu-item
        >
        <el-menu-item index="/class-paramater">
          <i class="el-icon-tickets"></i>
          <span slot="title">分类参数</span></el-menu-item
        >
        <el-menu-item index="/thing-class">
          <i class="el-icon-s-shop"></i>
          <span slot="title">商品分类</span></el-menu-item
        >
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-s-claim"></i>
          <span slot="title">订单管理</span>
        </template>
        <el-menu-item index="/order-lists">
          <i class="el-icon-menu"></i>
          <span slot="title">订单列表</span></el-menu-item
        >
      </el-submenu>
      <el-menu-item index="/report-form">
        <i class="el-icon-s-marketing"></i>
        <span slot="title">数据报表</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  created() {
    console.log(this.editThings);
  },
  computed: {
    ...mapState(["menu", "editThings"]),
  },
  methods: {
    ...mapMutations(["changeState"]),
  },
};
</script>

<style  lang='less'>
.el-submenu .el-menu-item {
  min-width: 199px !important;
}
.el-menu-vertical-demo {
  // position: absolute;
  // top: 0;
  // left: 0;
  width: 200px;
  min-height: 100vh;
}
</style>